<template>
  <div>
    <el-dialog
      width="90%"
      top="5vh"
      title="User Battery Swap Details"
      :visible.sync="show"
    >
      <r-search
        ref="search"
        :searchData="searchData"
        :searchForm="searchForm"
        :searchHandle="searchHandle"
        :inline="true"
      />
      <r-table
        :isPagination="true"
        :isHandle="true"
        :tableData="tableData"
        :tableCols="tableCols"
        :tablePage="pagination"
        :loading="tableLoading"
        :tableHandles="tableHandles"
        :isSelection="false"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Abnormal_record",
  data() {
    return {
      searchData: {
        beginTime: "",
        endTime: ""
      },
      searchForm: [
        {
          type: "date",
          placeholder: "Start Date",
          prop: "beginTime",
          width: 240,
          change: val => {
            this.searchData.beginTime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Date",
          prop: "endTime",
          width: 240,
          change: val => {
            this.searchData.endTime = val;
          }
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        }
      ],

      show: false,
      row: {},
      tableLoading: false,
      tableData: [],
      tableHandles: [
        {
          label: "Meter Reading Record Export",
          type: "primary",
          icon: "el-icon-download",
          // titles:
          //   "可以根据Device Number、Start Time、End Time筛选出Record再Export，也可以不选，直接ExportWholeRecord",
          plain: true,
          loading: false,
          handle: async e => {
            let parm = {
              deviceId: this.row.id || "",
              beginTime: this.searchData.beginTime,
              endTime: this.searchData.endTime
            };
            const res = await this.apis.deviceElectricRecordListExport(parm);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.code == 200 ? "Export Success" : "error"
            });
            location.href = process.env.VUE_APP_URL + res.msg;
          }
        }
      ],
      pagination: { limit: 10, offset: 1, total: 0 },
      tableCols: [
        { label: "Device Number", prop: "deviceNo" },
        {
          label: "Total Electricity Consumption",
          prop: "electric",
          formatter: e =>
            e.electric
              ? e.electric + "kwh"
              : e.electric === 0
              ? e.electric + "kwh"
              : "--"
        },
        { label: "Meter Reading Time", prop: "ctime" },
        { label: "Meter Reading Start Time", prop: "beginTime" },
        { label: "Meter Reading End Time", prop: "endTime" }
      ]
    };
  },
  watch: {
    "pagination.offset": {
      handler(newValue) {
        if (newValue) {
          this.getData();
        }
      },
      deep: true // 深度监听
    },
    "pagination.limit": {
      handler(newValue) {
        if (newValue) {
          this.getData();
        }
      },
      deep: true // 深度监听
    }
  },
  mounted() {},
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async getData() {
      let parm = {
        deviceId: this.row.id || "",
        beginTime: this.searchData.beginTime,
        endTime: this.searchData.endTime,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      };
      let res = await this.apis.deviceElectricRecordList(parm);
      this.tableData = res.rows || [];
      this.pagination.total = res.total;
    },
    show_fun(row) {
      // console.log(222, row);
      this.row = row;
      this.show = true;
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
